<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>预算管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap/bootstrap.min.css"/>
	<link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap-table.min.css"/>
    <style type="text/css">
    	#addBudgetModal,#editBudgetModal{margin-top:5%;margin-left:5%;margin-right:5%}
    	.second,.third{
            display: none;
        }
        .firstEdit,.secondEdit,.thirdEdit{
        	display:none;
        }
		.container{
			margin-top:100px;
		}
		body{
        	background:transparent;
    	}
    	section{
    		margin:0px 20px;
    	}
    </style>
</head>
<body>
	<section class="content-header">
		<h4>预算管理</h4>
	</section> 
	<section class="content table-content">
		<form class="form-inline" >
		<!-- 工具栏 -->
		<div id="toolbar">
			<input type="button" value="新增预算" id="addBtn" data-toggle="modal" data-target="#addBudgetModal" class="btn btn-primary" ></input>
			<input type="button" value="修改预算" id="editBtn" class="btn btn-success" onclick="editBudgetItem()"></input>
			<input type="button" value="删除预算" id="deleteBtn" class="btn btn-info" onclick="deleteBudgetItem()"></input>
		</div>
		<!-- bootstrapTable -->
		</form>
		<table id="dataGrid">
		</table>
	</section>
	<div class="modal fade" id="addBudgetModal" tabindex="-1" role="dialog" >
		<div class="modal-diolog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">新增预算</h5>
				</div>
				<div class="modal-body">
					<form id="budgetModalForm">
					<div class="row">
						<!-- 新增时ID自动创建，此处无用，但需将ID赋值于修改模态框ID处 -->
						<div class="form-group col-md-3" style="display:none">
							<label for="id">ID</label>
							<input type="text" class="form-control" id="id" placeholder="id"/>
						</div>
						<div class="form-group col-md-3">
							<label for="budgetItem">预算项目名称</label>
							<input type="text" class="form-control" id="budgetItem" placeholder="预算名称"/>
						</div>
						<div class="form-group col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label for="budgetType">预算类型</label>
			                        <select class="form-control" id="budgetType">
			                            <option>全部</option>
			                            <option>日常支出</option>
			                            <option>投资支出</option>
			                            <option>意外支出</option>
			                            <option>消费支出</option>
			                            <option>其他支出</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			        	<div class="form-group col-md-3">
				            <label for="budgetMoney">预算金额</label>
				            <input type="text" id="budgetMoney" class="form-control" placeholder="预算金额"/>
				        </div>
				        <div class="form-group col-md-3" >
				            <label for="budgetMember">制定人</label>
				            <select class="form-control" id="budgetMember" >
				            	<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
				            </select>
				            <!-- <input type="text" id="incomeMember" class="form-control" placeholder="收入人"/> -->
				        </div>
					</div>
			    	<div class="row">
			    		<div class="form-group col-md-3">
							<label for="datetimepicker">预算起始日期</label>
							<div class="input-group date form_date  " id="datetimepickerStart" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="budgetStartDate" placeholder="预算起始日期" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
						<div class="form-group col-md-3">
							<label for="datetimepicker">预算结束日期</label>
							<div class="input-group date form_date  " id="datetimepickerEnd" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="budgetEndDate" placeholder="预算结束日期" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
			        	<div class="form-group col-md-3">
				            <label for="budgetTip">备注</label>
				            <input type="text" id="budgetTip" class="form-control" placeholder="备注"/>
				        </div>
			    	</div>
			    	</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="resetModal()">取消</button>
					<button type="button" class="btn btn-primary" onclick="submit()">提交</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="editBudgetModal" tabindex="-1" role="dialog" >
		<div class="modal-diolog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">修改预算</h5>
				</div>
				<div class="modal-body">
					<form id="budgetModalFormEdit">
					<div class="row">
						<!-- 新增时ID自动创建，此处无用，但需将ID赋值于修改模态框ID处 -->
						<div class="form-group col-md-3" style="display:none">
							<label for="idEdit">ID</label>
							<input type="text" class="form-control" id="idEdit" placeholder="id"/>
						</div>
						<div class="form-group col-md-3">
							<label for="budgetItemEdit">预算项目名称</label>
							<input type="text" class="form-control" id="budgetItemEdit" placeholder="预算名称"/>
						</div>
						<div class="form-group col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label for="budgetType">预算类型</label>
			                        <select class="form-control" id="budgetTypeEdit">
			                            <option>全部</option>
			                            <option>日常支出</option>
			                            <option>投资支出</option>
			                            <option>意外支出</option>
			                            <option>消费支出</option>
			                            <option>其他支出</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			        	<div class="form-group col-md-3">
				            <label for="budgetMoneyEdit">预算金额</label>
				            <input type="text" id="budgetMoneyEdit" class="form-control" placeholder="预算金额"/>
				        </div>
				        <div class="form-group col-md-3" >
				            <label for="budgetMemberEdit">制定人</label>
				            <select class="form-control" id="budgetMemberEdit" >
				            	<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
				            </select>
				            <!-- <input type="text" id="incomeMember" class="form-control" placeholder="收入人"/> -->
				        </div>
					</div>
			    	<div class="row">
			    		<div class="form-group col-md-3">
							<label for="datetimepicker">预算起始日期</label>
							<div class="input-group date form_date  " id="datetimepickerStartEdit" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="budgetStartDateEdit" placeholder="预算起始日期" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
						<div class="form-group col-md-3">
							<label for="datetimepicker">预算结束日期</label>
							<div class="input-group date form_date  " id="datetimepickerEndEdit" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="budgetEndDateEdit" placeholder="预算结束日期" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
			        	<div class="form-group col-md-3">
				            <label for="budgetTip">备注</label>
				            <input type="text" id="budgetTipEdit" class="form-control" placeholder="备注"/>
				        </div>
			    	</div>
			    	</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="resetModal()">取消</button>
					<button type="button" class="btn btn-primary" onclick="edit()">提交</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/gradesign/js/console/budget.js"></script>
</html>